<template>
  <div>
    <el-card :body-style="{ padding: 0 }" :bordered="false" class="ivu-mt" shadow="never">
      <!--      <div class="padding-add">-->
      <!--        <el-form-->
      <!--          ref="tableFrom"-->
      <!--          :label-position="labelPosition"-->
      <!--          :label-width="labelWidth"-->
      <!--          :model="tableFrom"-->
      <!--          inline-->
      <!--          @submit.native.prevent-->
      <!--        >-->
      <!--          <el-form-item label="搜索：" label-for="content">-->
      <!--            <el-input-->
      <!--              v-model="tableFrom.content"-->
      <!--              class="form_content_width"-->
      <!--              placeholder="请输入代理电话、代理名称、ID"-->
      <!--            />-->
      <!--          </el-form-item>-->

      <!--          <el-form-item>-->
      <!--            <el-button v-db-click type="primary" @click="userSearchs">查询</el-button>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--      </div>-->
    </el-card>
    <el-card :bordered="false" class="ivu-mt mt16" shadow="never">
      <div class="rank-header">
        <h2>代理排名榜</h2>
        <!--        <div class="rank-filter">-->
        <!--          <el-radio-group v-model="tableFrom.rank_type" @change="userSearchs">-->
        <!--            <el-radio-button label="total_brokerage">累计佣金</el-radio-button>-->
        <!--            <el-radio-button label="order_count">订单数量</el-radio-button>-->
        <!--            <el-radio-button label="order_price">订单金额</el-radio-button>-->
        <!--            <el-radio-button label="child_num">下级数量</el-radio-button>-->
        <!--          </el-radio-group>-->
        <!--        </div>-->
      </div>
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableList"
        class="mt14"
        highlight-current-row
        no-filtered-userFrom-text="暂无筛选结果"
        no-userFrom-text="暂无数据"
      >
        <el-table-column type="index" label="排名" width="80">
          <template slot-scope="scope">
            <div class="rank-number" :class="getTopClass(scope.$index)">{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="代理名称" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="代理手机号" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="累计佣金" min-width="100" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.total_brokerage }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单数量" min-width="100" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.order_count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" min-width="100" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.order_price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下级数量" min-width="100" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.child_num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金牌代理" min-width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_gold === 1" type="success">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="产品销售1级" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.product_1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品销售2级" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.product_2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品销售3级" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.product_3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品销售4级" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.product_4 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品销售5级" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.product_5 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="推荐代理1级" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.recommend_leader_1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="推荐代理2级" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.recommend_leader_2 }}</span>
          </template>
        </el-table-column>

        <!--        <el-table-column label="性别" min-width="60">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span v-if="scope.row.sex === 1">男</span>-->
        <!--            <span v-else-if="scope.row.sex === 0">女</span>-->
        <!--            <span v-else>-</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="年龄" min-width="60">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{ scope.row.age }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="地址" min-width="150">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-tooltip :content="scope.row.address" placement="top" :disabled="!scope.row.address">-->
        <!--              <span class="ellipsis">{{ scope.row.address || '-' }}</span>-->
        <!--            </el-tooltip>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :limit.sync="tableFrom.limit"
          :page.sync="tableFrom.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { formatDate } from '@/utils/validate';
import { leaderRankingApi } from '@api/agent';

export default {
  name: 'agent-ranking',
  filters: {
    formatDate(time) {
      if (time !== 0) {
        let date = new Date(time * 1000);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
  },
  data() {
    return {
      loading: false,
      tableFrom: {
        content: '',
        page: 1,
        limit: 20,
        rank_type: 'total_brokerage', // 默认按累计佣金排名
      },
      tableList: [],
      total: 0,
    };
  },
  activated() {
    this.getList();
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '90px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  methods: {
    // 获取前三名的样式类
    getTopClass(index) {
      if (index === 0) return 'rank-first';
      if (index === 1) return 'rank-second';
      if (index === 2) return 'rank-third';
      return '';
    },

    // 获取排名列表
    getList() {
      this.loading = true;
      leaderRankingApi(this.tableFrom)
        .then(async (res) => {
          let data = res.data;
          this.tableList = data.list;
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },

    // 表格搜索
    userSearchs() {
      this.tableFrom.page = 1;
      this.getList();
    },
  },
};
</script>

<style lang="stylus" scoped>
.rank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
  }
}

.rank-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: bold;
}

.rank-first {
  background-color: #FFD700;
  color: #fff;
}

.rank-second {
  background-color: #C0C0C0;
  color: #fff;
}

.rank-third {
  background-color: #CD7F32;
  color: #fff;
}

.ellipsis {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>